<template>
	<view>
		<div class="ul">
			<div class="li" v-for="(item,index) in list" :key="index">
				<div class="img" >
					<image  @click="look(item.url)" :src="item.url" mode="heightFix"></image>
				</div>
				<div class="btn" @click="generate(item.id)">生 成</div>
			</div>

		</div>
		<!-- 预览图片 -->
		<div class="box" v-if="show" @click="(show=false)">
			<image :src="url" mode="widthFix"></image>
		</div>
	</view>
</template>

<script>
import Api from "../../API/api";
	export default {
		data() {
			return {
				show: false,
				url: "",
        list:[] ,
        lock: true
			};
		},
    onLoad(){
      uni.setStorageSync("type",true)
      Api.getposter({type:true}).then(res=>{
        this.list = res.data;
      })
    },
		methods: {
      //预览
			look(url) {
				this.show = true
				this.url = url
			},
      generate(id) {
        if (this.lock) {
          this.lock = false
          uni.showToast({
            title: '加载中',
            icon: 'loading',
            duration: 10000
          });
          Api.getcreateMaterial(id).then(res => {
            uni.showToast({
              title: '添加成功',
              icon: 'checkmarkempty'
            })
          })
          this.lock = true
          uni.hideLoading();
        }
      }
		}
	}
</script>

<style lang="less" scoped>
	.ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.li {
			background-color: #fff;
			width: 48%;
			box-sizing: border-box;
			height: 430rpx;
			margin-bottom: 30rpx;
			padding: 20rpx;
			border-radius: 20rpx;

			.img {
				width: 100%;
				height: 300rpx;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					height: 100%;
				}
			}

			.btn {
				height: 50rpx;
				width: 50%;
				line-height: 50rpx;
				border-radius: 50rpx;
				text-align: center;
				background-color: #fd9509;
				color: #fff;
				margin: 30rpx auto;
			}
		}
	}

	// 预览
	.box {
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(255, 255, 255, 1);
			
		image {
			max-width: 100%;
			max-height: 100%;
		}
	}
</style>